<template>
  <view class="container">
    <view class="shop-header" v-if="isHeader">
      <up-image
        src="/static/icon/hot.png"
        width="45rpx"
        height="45rpx"
        mode="widthFix"
      ></up-image>
      <text style="font-size: 35rpx; font-weight: bold">推荐商品</text>
    </view>
    <!-- 商品列表 -->
    <view
      class="shop-list"
      v-for="(value, index) in shopList"
      :key="index"
      @click="handleClick(value, index)"
    >
      <up-image
        :src="getImageUrl(value.imageUrl)"
        width="230rpx"
        height="230rpx"
        mode="widthFix"
        lazy-load
      ></up-image>
      <view class="shop-info">
        <text style="font-weight: bold; font-size: 30rpx">{{
          value.announceName
        }}</text>
        <text style="color: #000000; margin-top: -30rpx"
          >租金： ¥{{ value.money }}/{{ value.unit }}</text
        >
        <text style="color: #000000; margin-top: -30rpx"
          >押金： {{ value.deposit }}</text
        >
        <text style="color: #9a1e23; font-size: 35rpx"
          >固定租期：{{ value.leaseDuration
          }}{{ getDurationUnit(value.durationType) }}</text
        >
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, watch } from "vue";
import type { ShopItem } from "./shopList";
import { UPLOAD } from "@/config/index";
const shopList = reactive<ShopItem[]>([]);
const props = defineProps({
  isHeader: {
    type: Boolean,
    default: true,
  },
  getShopList: {
    type: Array,
    default: () => [],
  },
});
watch(
  () => props.getShopList,
  (newVal) => {
    const list = newVal as ShopItem[];
    shopList.splice(0, shopList.length, ...list);
  },
  { deep: true }
);
const getDurationUnit = (type: string) => {
  switch (type) {
    case "Y":
      return "年";
    case "M":
      return "月";
    default:
      return "日";
  }
};

const handleClick = (item: any, index: any) => {
  const can = JSON.stringify(item);
  uni.navigateTo({
    url: `/subPackages/deviceDetail/index?item=${encodeURIComponent(can)}`,
  });
};
const getImageUrl = (imageUrl: any) => {
  if (!imageUrl) return "";
  if (Array.isArray(imageUrl)) {
    if (imageUrl.length === 0) return "";
    imageUrl = imageUrl[0];
  }
  if (typeof imageUrl !== "string") return "";

  let cleanImageUrl = imageUrl.trim();
  if (cleanImageUrl.endsWith(";")) {
    cleanImageUrl = cleanImageUrl.slice(0, -1);
  }
  if (cleanImageUrl.startsWith("http")) {
    return cleanImageUrl;
  }
  // console.log(cleanImageUrl, "cleanImageUrl");

  // 正确拼接 UPLOAD 路径
  return `${UPLOAD}${cleanImageUrl}`;
};
</script>

<style lang="scss" scoped>
.shop-header {
  display: flex;
  gap: 20rpx;
  margin: 30rpx 0 10rpx;
}
.shop-list {
  display: flex;
  width: 100%;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #e5e5e5;
  .shop-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    padding: 10rpx 20rpx;
  }
}
</style>
